<template>
  <div>
    <!--  main-->
    <el-main>
      <div class="main_container">
        <el-row class="flex-height">
          <el-col :span="6">
            <div class="flex-1 flex-column  width-100 content-box height-3">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">专家类型</div>
                  <div ref="chartColumn" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box height-3 mt-1">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">年龄统计</div>
                  <div ref="chartColumn1" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box height-3 mt-1">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">专家活跃度</div>
                  <div ref="chartColumn2" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex flex-column width-100 center-box" style="height: 67%">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item" id="yuyangMap">

                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box center-box height-3 mt-1">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">问题统计</div>
                  <div ref="chartColumn6" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="flex flex-column width-100 content-box height-3">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">性别统计</div>
                  <div ref="chartColumn3" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box height-3 mt-1">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">专家发布数前5名</div>
                  <div ref="chartColumn4" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
            <div class="flex flex-column width-100 content-box height-3 mt-1">
              <div class="flex-1 flex-column flex-height">
                <div class="flex-height flex-column align-center s-data-item">
                  <div class="text-main font-16 pt-1">职务统计</div>
                  <div ref="chartColumn5" class=" flex-1" style="width:100%;height: 100%"></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>

import VueAMap, { lazyAMapApiLoaderInstance } from 'vue-amap'
import Vue from 'vue'

export default {
  name: 'BigDatapage2',
  data () {
    return {
      tabIndex: 0,
      currentDate: '',
      currentTime: ''
    }
  },
  mounted () {
    this.initMap()
    this.initChart()
    this.initChart1()
    this.initChart2()
    this.initChart3()
    this.initChart4()
    this.initChart5()
    this.initChart6()
  },
  methods: {
    // 初始化地图
    initMap () {
      Vue.use(VueAMap)
      VueAMap.initAMapApiLoader({
        key: '34be61f600c91e23d76cc28461e602be',
        plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.DistrictLayer', 'AMap.Geocoder'],
        // 默认高德 sdk 版本为 1.4.4
        v: '1.4.18',
        protocol: location.protocol === 'https:' ? 'https' : 'http'
      })
      var that = this
      lazyAMapApiLoaderInstance.load().then(() => {
        that.map = new AMap.Map('yuyangMap', { // 设置地图容器id
          mapStyle: 'amap://styles/9f448630955630a5f70bc882000b7f68',
          zIndex: 99,
          resizeEnable: true
        })
        that.getGeoJSONData()
      })
    },
    // 获取默认geojson
    getGeoJSONData () {
      const that = this
      this.$http.get(this.uploadedDataURL).then(({ data: geoJSON }) => {
        that.jsonData = geoJSON
        if (that.jsonData.features.length === 1) {
          that.getSJS('')
        }
        that._drawGeoJson()
      })
    },
    // 绘制geojson
    _drawGeoJson () {
      const that = this
      const strokeColor = '#d0d0d0'
      const fillcolor = '#246de6'
      var geojson = new AMap.GeoJSON({
        geoJSON: that.jsonData,
        getPolygon: function (geojson, lnglats) {
          var area = geojson.properties._parentProperities
          var polygon = new AMap.Polygon({
            path: lnglats,
            fillOpacity: 0.5,
            strokeColor: strokeColor,
            strokeOpacity: 0.8, // 线透明度
            strokeWeight: 2, // 线宽
            strokeStyle: 'dashed',
            fillColor: fillcolor

          })
          polygon.setExtData({
            geojson,
            areaName: geojson.properties._parentProperities.name
          })
          polygon.on('click', that.clickArea)
          if (area.centroid) {
            that._drawTextMap(area.name, area.centroid)
          } else {
            that._drawTextMap(area.name, area.center)
          }

          return polygon
        }
      })
      geojson.setMap(this.map)
      this.map.setFitView()
    },
    // 绘制城市名称
    _drawTextMap (areaName, center) {
      const text = new AMap.Text({
        text: areaName,
        anchor: 'center', // 设置文本标记锚点
        zIndex: 200,
        draggable: false,
        cursor: 'pointer',
        angle: 0,
        style: {
          background: '#312ddc',
          color: '#fff',
          'font-size': '10px',
          'line-height': '1.4',
          border: '0'
        },
        position: [parseFloat(center[0]), parseFloat(center[1])]
      })
      text.setMap(this.map)
      if (areaName === '耀州区') {
        const text = new AMap.Text({
          text: '铜川新区',
          anchor: 'center', // 设置文本标记锚点
          zIndex: 200,
          draggable: false,
          cursor: 'pointer',
          angle: 0,
          style: {
            background: '#312ddc',
            color: '#fff',
            'font-size': '10px',
            'line-height': '1.4',
            border: '0'
          },
          position: [parseFloat(center[0]), parseFloat(center[1]) - 0.08]
        })
        text.setMap(this.map)
      }
    },
    initChart () {
      this.chartColumn = this.$echarts.init(this.$refs.chartColumn)
      var data = [{
        name: '省级专家',
        value: 13211
      },
      {
        name: '市级专家',
        value: 42111
      },
      {
        name: '区级专家',
        value: 81711
      },
      {
        name: '未填写',
        value: 121711
      }
      ]
      var arrName = getArrayValue(data, 'name')
      var arrValue = getArrayValue(data, 'value')
      var sumValue = eval(arrValue.join('+'))
      var objData = array2obj(data, 'name')
      var optionData = getData(data)
      function getArrayValue (array, key) {
        var key = key || 'value'
        var res = []
        if (array) {
          array.forEach(function (t) {
            res.push(t[key])
          })
        }
        return res
      }

      function array2obj (array, key) {
        var resObj = {}
        for (var i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i]
        }
        return resObj
      }

      function getData (data) {
        var res = {
          series: [],
          yAxis: []
        }
        for (let i = 0; i < data.length; i++) {
          res.series.push({
            name: '学历',
            type: 'pie',
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ['30%', '55%'],
            label: {
              show: false
            },
            itemStyle: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              borderWidth: 5
            },
            data: [{
              value: data[i].value,
              name: data[i].name
            }, {
              value: sumValue - data[i].value,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }]
          })
          res.series.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ['30%', '55%'],
            label: {
              show: false
            },
            itemStyle: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              borderWidth: 5
            },
            data: [{
              value: 7.5,
              itemStyle: {
                color: '#E3F0FF',
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }, {
              value: 2.5,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }]
          })
          res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + '%')
        }
        return res
      }

      const option = {
        backgroundColor: 'transparent',
        legend: {
          show: true,
          top: 'center',
          left: '70%',
          data: arrName,
          itemWidth: 30,
          itemHeight: 20,
          width: 50,
          padding: [0, 5],
          itemGap: 25,
          formatter: function (name) {
            return '{title|' + name + '}\n{value|' + (objData[name].value) + '人}'
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 10,
                lineHeight: 10,
                color: '#fff'
              },
              value: {
                fontSize: 14,
                lineHeight: 18,
                color: '#fff'
              }
            }
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a}<br>{b}:{c}({d}%)'
        },
        color: ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
        grid: {
          top: '20%',
          bottom: '48%',
          left: '30%',
          containLabel: false
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
              color: '#000',
              fontSize: 10
            },
            show: true
          },
          data: optionData.yAxis
        }],
        xAxis: [{
          show: false
        }],
        series: optionData.series
      }
      this.chartColumn.setOption(option)
    },
    initChart1 () {
      this.chartColumn1 = this.$echarts.init(this.$refs.chartColumn1)
      var xdata = ['0-29岁', '0-29岁', '30-39岁', '40-49岁', '50-59岁']
      var data = [70, 60, 80, 100, 55, 99]
      var maxArr = [100, 100, 100, 100, 100]
      const option = {
        backgroundColor: 'rgba(5,39,58,0)', // 背景色
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          // borderRadius: 5,
          // borderColor: "#6baab2",
          // borderWidth: 1,
          formatter: function (params) { // params[0].data.nameCode
            const dot = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>'
            return (
              params[0].name +
                '<br>' +
                '杆塔数量 ：' +
                params[0].value
            )
          }
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '8%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          data: xdata,
          triggerEvent: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
              padding: [14, 0, 0, 0],
              fontSize: 14,
              color: 'rgba(255,255,255,1)'
            }
          }
        },
        yAxis: {
          name: '',
          triggerEvent: true,
          nameTextStyle: {
            color: 'rgba(255,255,255,1)',
            fontSize: 16,
            padding: [0, 0, 10, -20]
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          }
        },
        // color: ["#e54035"],
        series: [{
          name: '数量',
          barMinHeight: 10,
          type: 'pictorialBar',
          barCategoryGap: '60%',
          // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          itemStyle: {
            normal: {
              // barBorderRadius: 5,
              // 渐变色
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#01EAED'
              },
              {
                offset: 0.5,
                color: '#02C4DD'
              },
              {
                offset: 1,
                color: '#029ED9'
              }
              ])
            }
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
                fontSize: 20
              }
            }
          },
          data: data,
          z: 10
        },
        {
          name: 'hill',
          type: 'bar',
          barWidth: '20%',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          itemStyle: {
            normal: {
              color: 'rgba(11,47,68,.8)'
            }
          },
          data: maxArr,
          z: 9
        }
        ]
      }
      this.chartColumn1.setOption(option)
    },
    initChart2 () {
      this.chartColumn2 = this.$echarts.init(this.$refs.chartColumn2)
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        grid: {
          left: '8%',
          top: '18%',
          right: '5%',
          bottom: '22%'
        },
        legend: {
          data: ['专家'],
          top: '4%',
          textStyle: {
            color: '#1FC3CE',
            fontSize: 14
          }
        },
        xAxis: {
          data: [
            '商洛市',
            '渭南市',
            '咸阳市',
            '榆林市',
            '商洛市',
            '铜川市',
            '宝鸡市',
            '延安市',
            '汉中市',
            '安康市'
          ],
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#3d5269',
              width: 1
            }
          },
          axisTick: {
            show: true, // 隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', // X轴文字颜色
              fontSize: 14
            },
            interval: 0,
            rotate: 30
          }
        },
        yAxis: [{
          type: 'value',
          name: '',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3d5269'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', // X轴文字颜色
              fontSize: 14
            },
            interval: 0,
            rotate: 30
          }
        },
        {
          type: 'value',
          name: '',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#396A87',
              width: 2
            }
          },
          axisLabel: {
            show: true,
            formatter: '{value} %', // 右侧Y轴文字显示
            textStyle: {
              color: '#396A87',
              fontSize: 14
            }
          }
        }
        ],
        series: [{
          name: '专家',
          type: 'bar',
          barWidth: 14,
          itemStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#0A89FF'
              },
              {
                offset: 1,
                color: '#14FAF6'
              }
              ])
            }
          },
          data: [24, 45, 43, 35, 76, 154, 86, 42, 68, 97]
        }
        ]
      }
      this.chartColumn2.setOption(option)
    },
    initChart3 () {
      this.chartColumn3 = this.$echarts.init(this.$refs.chartColumn3)
      var img = ''

      var trafficWay = [{
        name: '男',
        value: 20
      }, {
        name: '女',
        value: 10
      }]

      var data = []
      var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        })
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [85, 69],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#ddd',
              formatter: function (params) {
                // var percent = 0
                // var total = 0
                // for (var i = 0; i < trafficWay.length; i++) {
                //   total += trafficWay[i].value
                // }
                // percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== '') {
                  return params.name + '：' + params.value
                } else {
                  return ''
                }
              }
            },
            labelLine: {
              length: 30,
              length2: 60,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }]
      const option = {
        backgroundColor: 'transparent',
        color: color,
        graphic: {
          elements: [{
            type: 'image',
            z: 3,
            style: {
              image: img,
              width: 108,
              height: 108
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }]
        },
        grid: {
          left: '8%',
          top: '18%',
          right: '5%',
          bottom: '22%'
        },
        tooltip: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      this.chartColumn3.setOption(option)
    },
    initChart4 () {
      this.chartColumn4 = this.$echarts.init(this.$refs.chartColumn4)
      const option = {
        backgroundColor: 'transparent',
        grid: [
          {
            left: '18%',
            top: '8%',
            right: '5%',
            bottom: '22%'
          },
          {
            left: '18%',
            top: '8%',
            right: '5%',
            bottom: '22%'
          }
        ],
        xAxis: [
          {
            max: 500,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: '#10899A'
              }
            },
            axisTick: {
              show: false,
              inside: true,
              lineStyle: {
                color: '#10899A',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: (params) => {
                return '{marginTop|' + params + '}'
              },
              rich: {
                marginTop: {
                  padding: [0, 0, 0, 0],
                  color: '#fff',
                  fontSize: 14,
                  fontFamily: 'PingFangSC',
                  fontWeight: 300

                }
              }
            }
          },
          {
            gridIndex: 1,
            show: true,
            offset: 13,
            axisLine: {
              lineStyle: {
                color: '#10899A'
              }
            }
          }
        ],
        yAxis: [{
          name: '',
          data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
          axisLabel: {
            show: false
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
            fontFamily: 'PingFangSC',
            fontWeight: 300,
            padding: [0, 0, 8, 0]
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#10899A'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#10899A',
              fontSize: 14,
              fontFamily: 'PingFangSC',
              fontWeight: 300
            }
          }

        }, {
          gridIndex: 1,
          data: ['张三', '李四', '小刘', '瑶瑶', '梦溪'],
          position: 'left',
          nameTextStyle: {
            color: '#10899A',
            padding: [0, 0, 0, 8],
            fontSize: 14,
            fontFamily: 'PingFangSC',
            fontWeight: 300
          },
          axisLabel: {
            formatter: (params) => {
              return '{marginTop|' + params + '}'
            },
            rich: {
              marginTop: {
                padding: [0, 0, 0, 0],
                color: '#fff',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300

              }
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#10899A'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '订单数量',
          type: 'bar',
          itemStyle: {
            barBorderRadius: 0,
            color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(255,183,66,.3)'
            },
            {
              offset: 1,
              color: '#FFB742'
            }
            ])
          },
          barWidth: 20,
          data: [482, 378, 446, 518, 238, 358, 312, 378, 220, 452, 302, 372]
        }]
      }
      this.chartColumn4.setOption(option)
    },
    initChart5 () {
      this.chartColumn5 = this.$echarts.init(this.$refs.chartColumn5)
      var color = [
        '#0CD2E6',
        '#3751E6',
        '#FFC722',
        '#886EFF',
        '#008DEC',
        '#114C90',
        '#00BFA5'
      ]

      var title = ''
      var legend = [
        '医生',
        '医师',
        '主治医生',
        '副主任医生',
        '护士',
        '其他'
      ]

      var seriesData = [
        { name: '医生', value: 30 },
        { name: '医师', value: 10 },
        { name: '主治医生', value: 15 },
        { name: '副主任医生', value: 23 },
        { name: '护士', value: 10 },
        { name: '其他', value: 12 }
      ]

      var option = {
        backgroundColor: 'transparent',
        color: color,
        title: {
          top: 20,
          text: title,
          textStyle: {
            fontSize: 20,
            color: '#DDEEFF'
          }
        },
        grid: {
          top: '15%',
          left: 0,
          right: '1%',
          bottom: 5,
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          top: 'center',
          right: 10,
          textStyle: {
            align: 'left',
            verticalAlign: 'middle',
            rich: {
              name: {
                color: 'rgba(255,255,255,0.5)',
                fontSize: 10
              },
              value: {
                color: 'rgba(255,255,255,0.5)',
                fontSize: 10
              },
              rate: {
                color: 'rgba(255,255,255,0.9)',
                fontSize: 10
              }
            }
          },
          data: legend,
          formatter: (name) => {
            if (seriesData.length) {
              const item = seriesData.filter((item) => item.name === name)[0]
              return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`
            }
          }
        },
        series: [{
          name: '需求类型占比',
          type: 'pie',
          center: ['30%', '50%'],
          radius: ['45%', '65%'],
          label: {
            normal: {
              show: false,
              position: 'center',
              formatter: '{value|{c}}\n{label|{b}}',
              rich: {
                value: {
                  padding: 5,
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 32
                },
                label: {
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 16
                }
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '12'
              }
            }
          },
          labelLine: {
            show: false,
            length: 0,
            length2: 0
          },
          data: seriesData
        }]
      }
      const myChart = this.chartColumn5
      myChart.setOption(option)

      getDefaultSelected(myChart)

      function getDefaultSelected (myChart) {
        let index = 0
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0
        })
        myChart.on('mouseover', (e) => {
          if (e.dataIndex !== index) {
            myChart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: index
            })
          }
        })
        myChart.on('mouseout', (e) => {
          index = e.dataIndex
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: e.dataIndex
          })
        })
      }
    },
    initChart6 () {
      this.chartColumn6 = this.$echarts.init(this.$refs.chartColumn6)
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '',
          left: '12%',
          top: '13%',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        legend: {
          show: true,
          icon: 'circle',
          top: '13%',
          itemWidth: 6,
          itemHeight: 6,
          itemGap: 25,
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        grid: {
          top: '15%',
          left: '8%',
          right: '8%',
          bottom: '18%',
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          type: 'category',
          data: ['瑶瑶', '梦溪', '小刘', '安安', '小小', '时间', '苏落'],
          axisLine: {
            lineStyle: {
              color: '#1EF0D7'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff'
            },
            margin: 15
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '回答问题数',
          type: 'line',
          data: [5, 12, 11, 4, 25, 16, 1],
          symbolSize: 6,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            color: '#1EF0D7'
          },
          itemStyle: {
            normal: {
              color: '#1EF0D7',
              borderColor: '#1EF0D7'
            }
          },
          areaStyle: {
            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#1EF0D7'
            },
            {
              offset: 1,
              color: 'rgba(30,240,215,.3)'
            }
            ])
          },
          emphasis: {
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0,
                  color: '#9E87FF'
                },
                {
                  offset: 0.4,
                  color: '#9E87FF'
                },
                {
                  offset: 0.5,
                  color: '#fff'
                }, {
                  offset: 0.7,
                  color: '#fff'
                }, {
                  offset: 0.8,
                  color: '#fff'
                }, {
                  offset: 1,
                  color: '#fff'
                }
                ]
              },
              borderColor: '#9E87FF',
              borderWidth: 2
            }
          }
        }
        ]
      }
      this.chartColumn6.setOption(option)
    }
  }
}
</script>

<style scoped>
@import "../../../assets/scss/pages/data.scss";
.text-main{
  color: #00D8FF;
}
.height-3{
  height: 32.6%;
}
.main_container {
  height: calc(100vh - 167px);
}
.el-col{
  height: 100%;
}
.center-box{
  margin-left:10px;
  margin-right:10px;
  width: calc(100% - 20px);
}
.content-box{
  background: url("../../../assets/img/bigData/left-bg.png");
  background-size: 100% 100%;
}
</style>
